<template>
	<view class="content">
		<search disabled="false" style="position: fixed;top: 0;width: 100%;" :value="name" @tap="navigateToSearch()"></search>
		<view class="order_view">
			<view class="order_item" v-for="(item,index) in nameList" :key="index" @tap="choice(index)">
				<view :class="[active==index?'order_name_':'order_name']">{{item.name}}</view>
				<view style="flex-direction: column;margin-left: 5upx;">
					<view :class="[active_==index+'_1'?'top_':'top']"></view>
					<view style="height: 3upx;"></view>
					<view :class="[active_==index+'_2'?'buttom_':'buttom']"></view>
				</view>
			</view>
		</view>
		<!-- 商品部分 -->
		<view class="pro">
			<view @tap="navigateTo(pro.id)" v-for="(pro,index2) in productList" :key="index2" :class="[index2%2==1?'pro_item':'pro_item_']">
				<image class="pro_img" :src="pro.image"></image>
				<text class="pro_name">{{pro.name}}</text>
				<view class="pro_price">
					<text class="pro_market_Price">原价¥{{pro.marketPrice}}</text>
					<view style="align-items: flex-end;color: #FE0036;font-size: 24upx;">
						￥
						<view style="font-size: 32upx;font-weight: 700;">{{pro.price}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import search from '../../components/search.vue';
	import api from '../../common/api.js';
	export default {
		components: {
			search
		},
		data() {
			return {
				loadMore: true,
				name: null,
				categoryId: null,
				labelId: null,
				orderBy: null,
				page: 1,
				pageSize: 10,
				count: 0,
				active: -1,
				active_: '',
				productList: [],
				nameList: [{
						code: 1,
						name: "上架时间"
					},
					{
						code: 2,
						name: "价格"
					},
					{
						code: 3,
						name: "销量"
					},
				]
			}
		},
		onLoad(option) {
			this.name = option.name
			this.categoryId = option.categoryId
			this.labelId = option.labelId
			this.getData()
		},
		onPullDownRefresh() {
			this.page = 1
			this.loadMore = true
			this.productList = []
			this.getData()
		},
		onReachBottom() {
			if (this.loadMore) {
				this.page++;
				this.getData()
			}
		},
		methods: {
			navigateToSearch(){
				uni.navigateTo({
					url:"./searchProduct"
				})
			},
			/**跳转到商品详情
			 * @param {Object} id
			 */
			navigateTo(id) {
				uni.navigateTo({
					url: "./detail?id=" + id
				})
			},
			/**选择
			 * @param {Object} index
			 */
			choice(index) {
				if (this.active == index) {
					this.count = this.count + 1
					if (this.count % 2 == 1) {
						this.active_ = index + '_1'
					} else {
						this.active_ = index + '_2'
					}
				} else {
					this.active = index
					this.count = 0
					this.active_ = index + '_2'
				}
				this.productList = []
				this.page=1
				this.getData()

			},
			getData() {
				uni.showLoading({
					title: "加载中"
				})
				let orderBy = null
				if (this.active != -1) {
					orderBy = this.nameList[this.active].code
				}
				let order = null
				if (this.active_.lastIndexOf(1) != -1) {
					order = 1
				}
				if (this.active_.lastIndexOf(2) != -1) {
					order = 2
				}

				let param = {}
				param.page = this.page
				param.pageSize = this.pageSize
				if (order != null) {
					param.order = order
				}
				if (orderBy != null) {
					param.orderBy = orderBy
				}
				if (this.name != null) {
					param.name = this.name
				}
				if (this.categoryId != null) {
					param.categoryId = this.categoryId
				}
				if (this.labelId != null) {
					param.labelId = this.labelId
				}

				uni.request({
					url: this.$baseUrl + api.SEARCH,
					data: param,
					success: (res) => {
						uni.stopPullDownRefresh()
						if (res.data.code == 2000) {
							if (res.data.data != null && res.data.data.length != 0) {
								this.productList = this.productList.concat(res.data.data)
							} else {
								this.loadMore = false
							}
						}
					},
					complete: () => {
						uni.hideLoading()
					}
				})
			}
		}
	}
</script>

<style>
	.pro {
		margin-top: 190upx;
		width: 100%;
		padding: 0 16px;
		box-sizing: border-box;
		flex-wrap: wrap;
	}

	.pro_item {
		width: 49%;
		flex-direction: column;
		margin-bottom: 30upx;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}

	.pro_item_ {
		margin-right: 2%;
		width: 49%;
		flex-direction: column;
		margin-bottom: 30upx;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
	}

	.pro_img {
		width: 100%;
		height: 350upx;
	}

	.pro_market_Price {
		color: #999999;
		text-decoration: line-through;
	}

	.pro_real_price {
		font-weight: 700;
		color: #ff0000;
		font-size: 35upx;
	}

	.pro_name {
		margin-top: 20upx;
		padding: 0 10upx;
		box-sizing: border-box;
		min-height: 75upx;
		width: 100%;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.pro_price {
		padding: 20upx 20upx;
		box-sizing: border-box;
		justify-content: space-between;
		align-items: flex-end;
	}

	.order_name_ {
		color: #FF8C00;
	}

	.top_ {
		width: 0;
		height: 0;
		border-width: 10upx;
		border-style: solid;
		border-color: transparent transparent #FF8C00 transparent;

	}


	.top {
		width: 0;
		height: 0;
		border-width: 10upx;
		border-style: solid;
		border-color: transparent transparent #999999 transparent;

	}

	.buttom {
		width: 0;
		height: 0;
		border-width: 10upx;
		border-style: solid;
		border-color: #999999 transparent transparent transparent;
	}

	.buttom_ {
		width: 0;
		height: 0;
		border-width: 10upx;
		border-style: solid;
		border-color: #FF8C00 transparent transparent transparent;
	}


	.order_name {
		color: #555555;
	}

	.order_item {
		flex: 1;
		justify-content: center;
	}

	.order_view {
		height: 80upx;
		width: 100%;
		align-items: center;
		position: fixed;
		top: 75upx;
		background-color: #FFFFFF;
		border-bottom: 1px solid #F2F3F5;
	}
</style>
